<template>
  <view class="bg-box" v-if="show_flag">
    <view class="flex" v-for="(item, index) in comment_list" :key="index" @click="handleToHotDiscussion(item.id)">
      <view class="flex com-box">
        <view class="com-box-left">
          <image :src="item.user.avatar" mode="aspectFill" class="com-avatar"
                 v-if="item.user"></image>
        </view>
        <view class="flex flex-direction com-box-right">
          <view class="flex justify-between">
            <view class="flex flex-direction">
              <view class="com-nick-name">{{ item.user && item.user.nick_name }}</view>
              <view class="com-created-at">{{ item.created_at }}</view>

            </view>
            <view class="flex justify-between">
              <image :src="item.is_zan ? select_like_img : like_img" class="com-zan"
                     @click.stop="handleChangeLike(item, item.id)" v-if="item.user"></image>
              <image src="/static/icon/comments/pinglun@2x.png" class="com-ping-lun"
                     @click.stop="handlePopCommentBox(item.user.id, item.id)" v-if="item.user"></image>
            </view>
          </view>
          <view class="flex align-center com-content">
            {{ item.content_html }}
          </view>
          <view class="flex com-images-box">
            <view v-for="(imgs_arr_item, imgs_arr_index) in item.imgs_arr" :key="imgs_arr_index" class="flex"
                  @click.stop="handlePreviewImgs(imgs_arr_item, item.imgs_arr)">
              <image :src="imgs_arr_item" mode="aspectFill" class="com-images"></image>
            </view>
          </view>
          <view class="son-com-box" v-if="item.son_comments && item.son_comments.data.length>0">
            <view class="flex son-com-sec-box"
                  v-for="(son_comment_item, comment_index) in item.show_son_comments"
                  :key="comment_index">
              <view>
                <span>{{ son_comment_item.user && son_comment_item.user.nick_name }}</span><span
                 class="son-com-colon">:</span>
                <span class="son-com-content">{{ son_comment_item.content_html }}
                  <span v-if="son_comment_item.imgs_arr">
                  <image src="/static/icon/detail/tupian@2x.png" class="son-com-icon"></image>
                </span>
                </span>
              </view>
            </view>
            <view class="hot-discussion-box" v-if="item.hot_num > 3">
              <span class="hot-discussion">{{ item.hot_num }}人热议</span>
              <image src="/static/icon/detail/fanhui-2_1@2x.png" class="hot-discussion-arrow"></image>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="!comment_list.length" class="flex align-center justify-center default-page">
      <image src="/static/image/no_content@2x.png" class="default-page-img"></image>
      <view class="flex justify-center default-page-text">暂无内容</view>
    </view>
    <view>
      <view class="flex align-center justify-center pull-loading-box"
            v-if="comment_list.length >= 15">
        <view class="pull-loading-left"></view>
        <view class="pull-loading-status-box">
          <view v-if="!bottom_flag" class="pull-loading-status-text">到底了</view>
          <view v-else class="action">
            <view class="cu-load pull-loading-status-load" :class="!is_load?'loading':'over'"></view>
          </view>
        </view>
        <view class="pull-loading-right"></view>
      </view>
    </view>
    <!--发布评论框-->
    <publishCommentDialog :comment_flag="comment_flag" f_table="article" :f_id="article_id"
                          :receive_user_id="receive_user_id" :p_id="p_id" @handleCloseCommentBox="handleCloseCommentBox"
                          @handlePublishComment="handlePublishComment"></publishCommentDialog>
  </view>
</template>

<script>
import {chooseImage, getQiniuToken} from "utils/wxUtil";
import {comment_getListByCon, comment_publishComment} from "api/comment/comment";
import {zan_changeZan} from "api/like/like";
import publishCommentDialog from "components/publish-comment-dialog/publish-comment-dialog";

export default {
  components: {
    publishCommentDialog
  },
  data() {
    return {
      show_flag: false, //显示
      bottom_flag: true, //上拉加载
      is_load: false, //加载
      page: 1, //分页
      p_id: '', //评论id
      receive_user_id: '', //接收人id
      comment_flag: false, //评论框
      select_like_img: '/static/icon/detail/dianzan-1@2x.png', //选中点赞图片
      like_img: '/static/icon/detail/dianzan@2x.png', //点赞图片
      comment_list: [], //评论列表
      article_id: '', //文章id
      upload_imgs: [], //上传图片
      publish_imgs: [], //要发布的图片
    }
  },
  methods: {
    pageInit(page = 1, type = 'page_init') {
      this.page = page
      comment_getListByCon({f_table: 'article', f_id: this.article_id, p_id: 0, page}).then(res => {
        if(type === 'comment'){
          this.comment_list = [];
        }
        let temp_res_data = res.data && res.data.data || [];
        if(!temp_res_data.length){
          this.bottom_flag = false;
        }else {
          temp_res_data.forEach(item => {
            if (item.son_comments && item.son_comments.data) {
              item.show_son_comments = item.son_comments.data.slice(0, 3);
            }
            this.comment_list.push(item)
          })
        }
        this.show_flag = true;
      })
    },
    //预览图片
    handlePreviewImgs(img, imgs_arr) {
      uni.previewImage({
        urls: imgs_arr,
        current: img
      });
    },
    //去热评
    handleToHotDiscussion(p_id) {
      this.$uniNavigateTo(
          {
            url: '/pages/article/comments/hotDiscussion',
            query: {
              p_id
            }
          }
      )
    },
    //点赞
    handleChangeLike(item, f_id) {
      zan_changeZan({f_table: 'comment', f_id}).then(() => {
        let find = this.comment_list.find(x => x.id === item.id);
        if (find) {
          find.is_zan ? find.is_zan = 0 : find.is_zan = 1
        }
      })
    },
    //评论点赞
    handleChangeCommentLike(item) {
      item.is_comment_like = !item.is_comment_like;
    },
    //弹出评论框
    handlePopCommentBox(receive_user_id, p_id) {
      this.receive_user_id = receive_user_id;
      this.p_id = p_id;
      this.comment_flag = true;
    },
    //发布评论
    handlePublishComment(publishCommentData) {
      comment_publishComment(publishCommentData).then(res => {
        this.comment_flag = false;
        uni.showToast({
          title: res.msg,
          icon: 'none',
        })
        this.pageInit(1,'comment');

      }).catch(err => {
        uni.showToast({
          title: err.msg,
          icon: 'none',
        })
      })
      this.comment_flag = false;
    },
    //关闭评论框
    handleCloseCommentBox() {
      this.comment_flag = false;
    },
    //上传图片
    handleUploadImg() {
      chooseImage(8 - this.publish_imgs.length).then(res => {
        this.upload_imgs = res.image_array;
        this.publish_imgs = this.publish_imgs.concat(this.upload_imgs);
      })
    },
    //删除图片
    handleDeleteImg(index) {
      this.publish_imgs.splice(index, 1);
    }
  },
  onLoad(e) {
    this.article_id = e.article_id;
    this.pageInit();
    getQiniuToken();
  },
  //导航栏左侧按钮
  onBackPress() {
    if (this.comment_flag) {
      this.comment_flag = false;
      return true
    }
  },
  //上拉加载
  onReachBottom() {
    if (this.bottom_flag) {
      this.is_load = false;
      this.page += 1;
      this.pageInit(this.page);
    }
  },
  //下拉刷新
  onPullDownRefresh() {
    uni.stopPullDownRefresh();
  },
}
</script>

<style lang="less" scoped>
.pull-loading-right{
  width: 30%;
  height: 1px;
  background-color: #F1F1F1;
}
.pull-loading-status-load{
  font-size: 28upx;
  color: #CACACA;
}
.pull-loading-status-text{
  color: #CACACA;
  font-size: 24upx;
  margin: 0 40upx;
}
.pull-loading-status-box{
  width: 40%;
  text-align: center;
}
.pull-loading-left{
  width: 30%;
  height: 2upx;
  background-color: #F1F1F1;
}
.pull-loading-box{
  width: 100%;
  height: 102upx;
  padding: 0 50upx;
}
.default-page-text{
  font-size: 24upx;
  color: #999999;
}
.default-page-img{
  width: 264upx;
  height: 264upx;
}
.default-page{
  width: 100%;
  padding: 50% 0;
  flex-direction: column;
}
.hot-discussion-arrow{
  width: 12upx;
  height: 20upx;
}
.hot-discussion{
  margin-right: 10upx;
}
.hot-discussion-box{
  font-size: 26upx;
  color: #008CE6;
}
.son-com-icon{
  width: 24upx;
  height: 26upx;
  vertical-align:middle;
}
.son-com-content{
  font-size: 26upx;
}
.son-com-colon{
  margin: 0 10upx;
}
.son-com-sec-box{
  font-size: 26upx;
  color: #333333;
}
.son-com-box{
  width: 630upx;
  border-radius: 10upx;
  padding: 18upx;
  background-color: #F8F8F8;
}
.com-images-box{
  margin-bottom: 20upx;
  flex-wrap: wrap;
}
.bg-box{
  width: 100%;
  min-height: 100vh;
}
.com-content{
  width: 100%;
  padding: 20upx 0;
  font-size: 26upx;
  color: #333333;
}
.com-ping-lun{
  width: 30upx;
  height: 28upx;
  margin-left: 40upx;
}
.com-zan{
  width: 28upx;
  height: 28upx;
}
.com-created-at{
  font-size: 22upx;
  color: #999999;
}
.com-nick-name{
  font-size: 22upx;
  color: #333333;
}
.com-box-right{
  width: 88%;
}
.com-box-left{
  width: 12%;
}
.com-box{
  width: 100%;
  padding: 20upx;
  border-bottom: 2upx solid #F8F8F8;
}
.com-avatar{
  width: 68upx;
  height: 68upx;
  margin-right: 16upx;
  border-radius: 50%;
}
.textarea {
  background-color: #F8F8F8;
  width: 590upx;
  height: 202upx;
  border-radius: 10upx;
  padding: 22upx;
  font-size: 26upx;
  text-align: left;
  margin-bottom: 20upx;
}

.com-images {
  width: 200upx;
  height: 174upx;
  border-radius: 10upx;
  margin: 0 5% 5% 0;
}
</style>
